<template>
    <div>
        <section class="content-header">应急准备管理&nbsp;/&nbsp;危险源管理&nbsp;/&nbsp;新增危险源</section>
        <div class="col-md-12">
            <form class="form-horizontal">
                <div class="col-md-4">
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">危险源名称：</label>
                            <div class="col-sm-8">
                                <input
                                    type="text"
                                    class="form-control"
                                    size="20"
                                    placeholder="请输入危险源名称"
                                    v-model="form.hazard"
                                >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">危险源类型：</label>
                            <div class="col-sm-8">
                                <select class="form-control select2" style="width: 100%;" v-model="form.type">
                                    <option value disabled selected style="display:none;">请选择</option>
                                    <option
                                        v-for="lst in typeList"
                                        :value="lst.dicValue"
                                        :key="lst.value"
                                    >{{lst.dicSubitem}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">位置：</label>
                            <div class="col-sm-8">
                                <input
                                    type="text"
                                    class="form-control"
                                    onkeyup="value=value.replace(/[^\d]/g,'')"
                                    size="20"
                                    placeholder="请输入位置"
                                    v-model="form.location"
                                >
                            </div>
                        </div>
                        <dept v-model="form.deptid"/>
                        <person :deptId="form.deptid" v-model="form.personid"/>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">手机号码：</label>
                            <div class="col-sm-8">
                                <input
                                    onkeyup="value=value.replace(/[^\d]/g,'')"
                                    type="text"
                                    class="form-control"
                                    placeholder="请输入手机号码"
                                    v-model="form.phone"
                                >
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 error">
                    <!-- <div class="box-body">
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderName && !form.orderName) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入事件名称</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderType && !form.orderType) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件类别</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderLevel && !form.orderLevel) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件等级</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderOrigin && !form.orderOrigin) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件来源</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderPhone && !/^[1][3,4,5,7,8][0-9]{9}$/.test(this.form.orderPhone)) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入联系电话</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderArea && !form.orderArea ) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件片区</span>
                        </div>
                        <div class="form-group" style="height:34px">
                            <span class="error"></span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderPipeid && !form.orderPipeid) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件管线</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderDept && !form.orderDept) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择责任部门</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.personId && !form.personId ) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择责任人</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderTimelimit && !form.orderTimelimit) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择处理时限</span>
                        </div>
                    </div>-->
                </div>
                <div class="col-md-4">
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">诱发因素：</label>
                            <div class="col-sm-8">
                                <input
                                    type="text"
                                    class="form-control"
                                    placeholder="请输入诱发因素"
                                    v-model="form.factor"
                                >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">危险级别描述：</label>
                            <div class="col-sm-8">
                                <input
                                    type="text"
                                    class="form-control"
                                    size="20"
                                    placeholder="请输入危险级别描述"
                                    v-model="form.leveldes"
                                >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">可形成的危害：</label>
                            <div class="col-sm-8">
                                <input
                                    type="text"
                                    class="form-control"
                                    size="20"
                                    placeholder="请输入可形成的危害"
                                    v-model="form.result"
                                >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">可危害的区域：</label>
                            <div class="col-sm-8">
                                <input
                                    type="text"
                                    class="form-control"
                                    size="20"
                                    placeholder="请输入可危害的区域"
                                    v-model="form.area"
                                >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">备注：</label>
                            <div class="col-sm-8">
                                <textarea
                                    class="form-control"
                                    rows="4"
                                    placeholder="请输入备注"
                                    maxlength="80"
                                    v-model="form.remarks"
                                ></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="col-md-3"></div>
                    <div class="col-md-4" style="text-align: center">
                        <button
                            type="button"
                            class="btn btn-primary"
                            style="margin-right:50px"
                            @click="addForm"
                        >提交</button>
                        <button
                            type="button"
                            class="btn btn-default"
                            data-toggle="modal"
                            data-target="#myModal"
                        >取消</button>
                    </div>
                    <div class="col-md-4"></div>
                </div>
                <div
                    class="modal fade"
                    id="myModal"
                    tabindex="-1"
                    role="dialog"
                    aria-labelledby="myModalLabel"
                >
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button
                                    type="button"
                                    class="close"
                                    data-dismiss="modal"
                                    aria-label="Close"
                                >
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title" id="myModalLabel">提示</h4>
                            </div>
                            <div class="modal-body">
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                <p>您编辑的内容尚未保存，确定取消申请吗？</p>
                            </div>
                            <div class="modal-footer">
                                <router-link to="dangerous">
                                    <button
                                        type="button"
                                        class="btn btn-block btn-info"
                                        data-dismiss="modal"
                                    >确定</button>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
import dept from "@/components/common/emergency/dept.vue";
import person from "@/components/common/emergency/person.vue";

export default {
    data() {
        return {
            form: {
                hazard: "",
                type: "",
                location: "",
                deptid: "",
                personid: "",
                phone: "",
                remarks: "",
                factor: "",
                leveldes: "",
                result: "",
                area: ""
            },
            typeList: []
        };
    },
    components: {
        dept,
        person
    },
    mounted() {
        this.getType();
    },
    methods: {
        //添加
        addForm() {
            this.$api.zhunbei.addHazard(this.form).then(res => {
                if (res.success) {
                    this.$$message({
                        message: "恭喜您，添加成功！",
                        type: "success"
                    });
                    this.$router.push({ path: "dangerous" });
                }
            });
        },
        //危险源类型
        getType() {
            this.$api.zhunbei.hazardTypes().then(res => {
                if (res.success) {
                    // console.log(res);
                    this.typeList = res.data;
                }
            });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.control-label {
    padding: 0px !important;
    line-height: 34px;
    text-align: right;
}
</style>
